<template>
	<div class="liveactive">
		<ul>
			<li v-for="item in activearr">
				<div class="imgbox"><img :src="item.src"></div>
				<p>{{item.text}} <span class="rt">活动结束</span></p>
				<h5><i class="iconfont point">&#xe7c4;</i>{{item.adress}}
					<span class="rt"><i class="iconfont time">&#xe792;</i>{{item.tiem}}</span>
				</h5>
			</li>
		</ul>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.liveactive{
		background: #F2F2F2;
		margin-top: 40px;
		ul li{
			background: #fff;
			padding: 0 0 2px;
			margin-bottom:10px;
			text-align: left;
			.imgbox{
				width:100%;
				padding-top: 2px;
				img{
					width:100%;
					height: 268px;
				}
			}
			p{
				font-size: 13px;
				margin:8px 0;
				color: #5C5C5C;
				padding:0 6px;
			}
			h5{
				font-size: 11px;
				margin: 8px 0;
				color: #5C5C5C;
				padding:0 6px;
			}
			i{
				color: #949494;
				margin-right: 6px;
				font-size: 16px;
			}
			.time{
				position: relative;
				top: -1px;
			}
		}
	}
</style>

<script type="text/javascript">
	export default{
		data(){
			return{
				activearr:[]
			}
		},
		components:{

		},
		methods:{
			getData(){
				var _this=this;
				_this.$http.get('../../static/data/life.json').then(function(res){
					//console.log(res.data)
					_this.activearr=res.data.active;
				}).catch(function(err){
					console.log(err)
				})
			}
		},
		mounted(){
			this.getData();
		}
	}
</script>